<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="erpWorkOrderTypeUserList"
      style="width: 100%"
    >
      <el-table-column
        prop="userName"
        :label="$t('user')+$t('name')"
      />
      <el-table-column
        prop="grade"
        :label="$t('grade')"
      />
      <el-table-column
        prop="remark"
        :label="$t('remark')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{
            formatDate(scope.row.createdDate)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogErpWorkOrderTypeUserVisible"
      top="15px"
      append-to-body
    >
      <el-form
        label-width="20%"
        :model="erpWorkOrderTypeUser"
      >
        <el-form-item :label="$t('user')+$t('name')">
          <el-input v-model="erpWorkOrderTypeUser.userName" />
        </el-form-item>
        <el-form-item :label="$t('grade')">
          <el-input v-model="erpWorkOrderTypeUser.grade" type="number" />
        </el-form-item>
        <el-form-item :label="$t('remark')">
          <el-input v-model="erpWorkOrderTypeUser.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogErpWorkOrderTypeUserVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  formatDate,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  listWorkOrderTypeUser,
  updateWorkOrderTypeUser,
  deleteWorkOrderTypeUser,
  insertWorkOrderTypeUser
} from '@/api/erp/erpWorkOrderTypeUserApi'

export default {
  name: 'ErpWorkOrderTypeUser',
  props: {
    workOrderType: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      erpWorkOrderTypeUserList: [],
      erpWorkOrderTypeUser: {},
      dialogErpWorkOrderTypeUserVisible: false
    }
  },
  watch: {
    workOrderType: {
      deep: true,
      handler() {
        this.listWorkOrderTypeUser()
      }
    }
  }, created() {
    this.listWorkOrderTypeUser()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.erpWorkOrderTypeUser = {
        typeId: this.workOrderType.typeId
      }
      this.dialogErpWorkOrderTypeUserVisible = true
    },
    listWorkOrderTypeUser() {
      listWorkOrderTypeUser({
        typeId: this.workOrderType.typeId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.erpWorkOrderTypeUserList = data
        } else {
          this.erpWorkOrderTypeUserList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.erpWorkOrderTypeUser
      }
      if (!json.id) {
        insertWorkOrderTypeUser(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogErpWorkOrderTypeUserVisible = false
          }
          this.listWorkOrderTypeUser()
        })
      } else {
        updateWorkOrderTypeUser(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogErpWorkOrderTypeUserVisible = false
          }
          this.listWorkOrderTypeUser()
        })
      }
    },
    edit(item) {
      this.erpWorkOrderTypeUser = item
      this.dialogErpWorkOrderTypeUserVisible = true
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteWorkOrderTypeUser({
            id: item.id
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listWorkOrderTypeUser()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

